<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />


<meta name="author" content="Yiying Wang" />

<meta name="date" content="2017-03-15" />

<title>Basic Plots 23 - Radar Chart</title>

<script src="libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap-3.3.5/css/cosmo.min.css" rel="stylesheet" />
<script src="libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="libs/navigation-1.1/tabsets.js"></script>
<script src="libs/htmlwidgets-0.8/htmlwidgets.js"></script>
<script src="libs/echarts-2.2.7/echarts-all.js"></script>
<script src="libs/charts-ext-2.2.7/main.js"></script>
<script src="libs/charts-ext-2.2.7/BMap.js"></script>
<script src="libs/echarts-binding-0.2/echarts.js"></script>


<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>


<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>

<link rel="stylesheet" href="/home/madlogos/R/x86_64-pc-linux-gnu-library/3.3/knitr/misc/vignette.css" type="text/css" />

</head>

<body>

<style type = "text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
  height: auto;
}
.tabbed-pane {
  padding-top: 12px;
}
button.code-folding-btn:focus {
  outline: none;
}
</style>



<div class="container-fluid main-container">

<!-- tabsets -->
<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});
</script>

<!-- code folding -->






<div class="fluid-row" id="header">



<h1 class="title toc-ignore">Basic Plots 23 - Radar Chart</h1>
<h4 class="author"><em>Yiying Wang</em></h4>
<h4 class="date"><em>2017-03-15</em></h4>

</div>

<div id="TOC">
<ul>
<li><a href="#introduction"><span class="toc-section-number">1</span> Introduction</a></li>
<li><a href="#function-call"><span class="toc-section-number">2</span> Function Call</a></li>
<li><a href="#showcase"><span class="toc-section-number">3</span> Showcase</a><ul>
<li><a href="#data-preparation"><span class="toc-section-number">3.1</span> Data Preparation</a></li>
<li><a href="#radar-chart"><span class="toc-section-number">3.2</span> Radar Chart</a><ul>
<li><a href="#single-radar"><span class="toc-section-number">3.2.1</span> Single Radar</a></li>
<li><a href="#radar-with-multiple-series"><span class="toc-section-number">3.2.2</span> Radar with Multiple Series</a></li>
</ul></li>
<li><a href="#multiple-radars"><span class="toc-section-number">3.3</span> Multiple Radars</a></li>
<li><a href="#with-timeline"><span class="toc-section-number">3.4</span> With Timeline</a></li>
</ul></li>
<li><a href="#futher-setup"><span class="toc-section-number">4</span> Futher Setup</a><ul>
<li><a href="#setpolar"><span class="toc-section-number">4.1</span> <code>setPolar</code></a></li>
</ul></li>
</ul>
</div>

<p>First, you should load <code>recharts</code>:</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(recharts)</code></pre></div>
<div id="introduction" class="section level1">
<h1><span class="header-section-number">1</span> Introduction</h1>
<p>Radar plot includes 1 basic types:</p>
<ul>
<li>Radar</li>
</ul>
<table id="intro">
<tr>
<td>
<div id="htmlwidget-3eaf544967b7834f067d" style="width:400px;height:300px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-3eaf544967b7834f067d">{"x":{"series":[{"type":"radar","symbol":"none","name":0,"data":[{"name":"Merc 450SE","value":[16.4,275.8,180,17.4,4.07,3.07]},{"name":"Merc 450SL","value":[17.3,275.8,180,17.6,3.73,3.07]},{"name":"Merc 450SLC","value":[15.2,275.8,180,18,3.78,3.07]}]}],"legend":{"show":true,"data":["Merc 450SE","Merc 450SL","Merc 450SLC"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["mpg","disp","hp","qsec","wt","drat"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"polar":[{"center":["50%","50%"],"radius":"80%","indicator":[{"text":"mpg","max":20.76},{"text":"disp","max":330.96},{"text":"hp","max":216},{"text":"qsec","max":21.6},{"text":"wt","max":4.884},{"text":"drat","max":3.684}]}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC","x":"center","y":"bottom","orient":"horizontal"},"theme":"infographic"},"evals":[],"jsHooks":[]}</script>
</td>
<td>
</td>
</tr>
</table>
<p>The keys are:</p>
<ul>
<li>character <code>x</code> and numeric <code>y</code> and will be compacted using <code>data.table::dcast</code> with <code>fun=sum</code></li>
<li><strong><code>x</code> is used as indicators, while <code>facet</code> is used to produce separate pies!</strong></li>
<li>you can use <code>setPolar</code> to tune the polar system parameters.</li>
</ul>
</div>
<div id="function-call" class="section level1">
<h1><span class="header-section-number">2</span> Function Call</h1>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(data, x, &lt;y&gt;, &lt;series&gt;, &lt;facet&gt;, &lt;t&gt;, &lt;type&gt;, &lt;subtype&gt;)</code></pre></div>
<table>
<colgroup>
<col width="11%" />
<col width="88%" />
</colgroup>
<thead>
<tr class="header">
<th>Arg</th>
<th>Requirement</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>data</strong></p></td>
<td><p>source data in the form of data.frame</p></td>
</tr>
<tr class="even">
<td><p><strong>x</strong></p></td>
<td><p>character independent variable. Each level of <code>x[,1]</code> is treated as polar axis labels. Other type will be coerced to factors. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="odd">
<td><p><strong>y</strong></p></td>
<td><p>numeric dependent variable. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="even">
<td><p>series</p></td>
<td><p>series variable which will be coerced to factors. Each level of <code>series</code> is treated as a subsetting factor to produce data series. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="odd">
<td><p>facet</p></td>
<td><p>facetting variable which will be coerced to factors. Each level of <code>facet</code> is treated as a subsetting factor to produce separate pies. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="even">
<td><p>t</p></td>
<td><p>timeline variable which will be coerced to factors. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="odd">
<td><p>type</p></td>
<td><p>‘radar’.</p></td>
</tr>
<tr class="even">
<td><p>subtype</p></td>
<td><ul>
<li>radar: “fill”
<ul>
<li>fill: fill the radar with color (default hollow)</li>
</ul></li>
</ul></td>
</tr>
</tbody>
</table>
</div>
<div id="showcase" class="section level1">
<h1><span class="header-section-number">3</span> Showcase</h1>
<div id="data-preparation" class="section level2">
<h2><span class="header-section-number">3.1</span> Data Preparation</h2>
<p>Let’s look into <code>mtcars</code> dataset embeded in the package <code>datasets</code>. We want to compare some paramters (c(‘mpg’,‘disp’,‘hp’,‘qsec’,‘wt’,‘drat’)) among several models (Mercedes-benz 450 series).</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">cars =<span class="st"> </span>mtcars[<span class="kw">c</span>(<span class="st">&#39;Merc 450SE&#39;</span>,<span class="st">&#39;Merc 450SL&#39;</span>,<span class="st">&#39;Merc 450SLC&#39;</span>),
              <span class="kw">c</span>(<span class="st">&#39;mpg&#39;</span>,<span class="st">&#39;disp&#39;</span>,<span class="st">&#39;hp&#39;</span>,<span class="st">&#39;qsec&#39;</span>,<span class="st">&#39;wt&#39;</span>,<span class="st">&#39;drat&#39;</span>)]
cars$model &lt;-<span class="st"> </span><span class="kw">rownames</span>(cars)
cars &lt;-<span class="st"> </span>data.table::<span class="kw">melt</span>(cars, <span class="dt">id.vars=</span><span class="st">&#39;model&#39;</span>)
<span class="kw">names</span>(cars) &lt;-<span class="st"> </span><span class="kw">c</span>(<span class="st">&#39;model&#39;</span>, <span class="st">&#39;indicator&#39;</span>, <span class="st">&#39;Parameter&#39;</span>)
knitr::<span class="kw">kable</span>(cars)</code></pre></div>
<table>
<thead>
<tr class="header">
<th align="left">model</th>
<th align="left">indicator</th>
<th align="right">Parameter</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">Merc 450SE</td>
<td align="left">mpg</td>
<td align="right">16.40</td>
</tr>
<tr class="even">
<td align="left">Merc 450SL</td>
<td align="left">mpg</td>
<td align="right">17.30</td>
</tr>
<tr class="odd">
<td align="left">Merc 450SLC</td>
<td align="left">mpg</td>
<td align="right">15.20</td>
</tr>
<tr class="even">
<td align="left">Merc 450SE</td>
<td align="left">disp</td>
<td align="right">275.80</td>
</tr>
<tr class="odd">
<td align="left">Merc 450SL</td>
<td align="left">disp</td>
<td align="right">275.80</td>
</tr>
<tr class="even">
<td align="left">Merc 450SLC</td>
<td align="left">disp</td>
<td align="right">275.80</td>
</tr>
<tr class="odd">
<td align="left">Merc 450SE</td>
<td align="left">hp</td>
<td align="right">180.00</td>
</tr>
<tr class="even">
<td align="left">Merc 450SL</td>
<td align="left">hp</td>
<td align="right">180.00</td>
</tr>
<tr class="odd">
<td align="left">Merc 450SLC</td>
<td align="left">hp</td>
<td align="right">180.00</td>
</tr>
<tr class="even">
<td align="left">Merc 450SE</td>
<td align="left">qsec</td>
<td align="right">17.40</td>
</tr>
<tr class="odd">
<td align="left">Merc 450SL</td>
<td align="left">qsec</td>
<td align="right">17.60</td>
</tr>
<tr class="even">
<td align="left">Merc 450SLC</td>
<td align="left">qsec</td>
<td align="right">18.00</td>
</tr>
<tr class="odd">
<td align="left">Merc 450SE</td>
<td align="left">wt</td>
<td align="right">4.07</td>
</tr>
<tr class="even">
<td align="left">Merc 450SL</td>
<td align="left">wt</td>
<td align="right">3.73</td>
</tr>
<tr class="odd">
<td align="left">Merc 450SLC</td>
<td align="left">wt</td>
<td align="right">3.78</td>
</tr>
<tr class="even">
<td align="left">Merc 450SE</td>
<td align="left">drat</td>
<td align="right">3.07</td>
</tr>
<tr class="odd">
<td align="left">Merc 450SL</td>
<td align="left">drat</td>
<td align="right">3.07</td>
</tr>
<tr class="even">
<td align="left">Merc 450SLC</td>
<td align="left">drat</td>
<td align="right">3.07</td>
</tr>
</tbody>
</table>
</div>
<div id="radar-chart" class="section level2">
<h2><span class="header-section-number">3.2</span> Radar Chart</h2>
<div id="single-radar" class="section level3">
<h3><span class="header-section-number">3.2.1</span> Single Radar</h3>
<p>Set <code>type</code> ‘radar’ and do not set <code>series</code> or <code>facet</code>. But such a radar chart makes little sense.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(cars, indicator, Parameter, <span class="dt">type=</span><span class="st">&#39;radar&#39;</span>)</code></pre></div>
<div id="htmlwidget-a7061f7f9cfa8e6aa295" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-a7061f7f9cfa8e6aa295">{"x":{"series":[{"type":"radar","symbol":"none","name":0,"data":[{"name":"Parameter","value":[48.9,827.4,540,53,11.58,9.21]}]}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["mpg","disp","hp","qsec","wt","drat"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["Parameter"],"x":"left","y":"top","orient":"horizontal"},"polar":[{"center":["50%","50%"],"radius":"80%","indicator":[{"text":"mpg","max":58.68},{"text":"disp","max":992.88},{"text":"hp","max":648},{"text":"qsec","max":63.6},{"text":"wt","max":13.896},{"text":"drat","max":11.052}]}]},"evals":[],"jsHooks":[]}</script>
</div>
<div id="radar-with-multiple-series" class="section level3">
<h3><span class="header-section-number">3.2.2</span> Radar with Multiple Series</h3>
<p>So we always want to set data series to compare the parameters series by series.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(cars, indicator, Parameter, model, <span class="dt">type=</span><span class="st">&#39;radar&#39;</span>, <span class="dt">sub=</span><span class="st">&#39;fill&#39;</span>) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;Merc 450SE  vs  450SL  vs  450SLC&#39;</span>)</code></pre></div>
<div id="htmlwidget-ca25a9e59ff654b14a05" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-ca25a9e59ff654b14a05">{"x":{"series":[{"type":"radar","symbol":"none","name":0,"data":[{"name":"Merc 450SE","value":[16.4,275.8,180,17.4,4.07,3.07],"itemStyle":{"normal":{"areaStyle":{"type":"default"}}}},{"name":"Merc 450SL","value":[17.3,275.8,180,17.6,3.73,3.07],"itemStyle":{"normal":{"areaStyle":{"type":"default"}}}},{"name":"Merc 450SLC","value":[15.2,275.8,180,18,3.78,3.07],"itemStyle":{"normal":{"areaStyle":{"type":"default"}}}}]}],"legend":{"show":true,"data":["Merc 450SE","Merc 450SL","Merc 450SLC"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["mpg","disp","hp","qsec","wt","drat"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"polar":[{"center":["50%","50%"],"radius":"80%","indicator":[{"text":"mpg","max":20.76},{"text":"disp","max":330.96},{"text":"hp","max":216},{"text":"qsec","max":21.6},{"text":"wt","max":4.884},{"text":"drat","max":3.684}]}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="multiple-radars" class="section level2">
<h2><span class="header-section-number">3.3</span> Multiple Radars</h2>
<p>If you don’t set <code>series</code>, instead, set <code>facet</code>, you will yield a bunch of radars shoulder by shoulder.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(cars, indicator, Parameter, <span class="dt">facet=</span>model, <span class="dt">type=</span><span class="st">&#39;radar&#39;</span>) %&gt;%
<span class="st">        </span><span class="kw">setTitle</span>(<span class="st">&#39;Merc 450SE  vs  450SL  vs  450SLC&#39;</span>)</code></pre></div>
<div id="htmlwidget-17f169566c67238f5a38" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-17f169566c67238f5a38">{"x":{"series":[{"type":"radar","symbol":"none","name":"Merc 450SE","data":[{"name":"Parameter","value":[16.4,275.8,180,17.4,4.07,3.07]}]},{"type":"radar","symbol":"none","name":"Merc 450SL","data":[{"name":"Parameter","value":[17.3,275.8,180,17.6,3.73,3.07]}],"polarIndex":1},{"type":"radar","symbol":"none","name":"Merc 450SLC","data":[{"name":"Parameter","value":[15.2,275.8,180,18,3.78,3.07]}],"polarIndex":2}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["mpg","disp","hp","qsec","wt","drat"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["Parameter"],"x":"left","y":"top","orient":"horizontal"},"polar":[{"center":["20%","50%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":20.76},{"text":"disp","max":330.96},{"text":"hp","max":216},{"text":"qsec","max":21.6},{"text":"wt","max":4.884},{"text":"drat","max":3.684}]},{"center":["50%","50%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":20.76},{"text":"disp","max":330.96},{"text":"hp","max":216},{"text":"qsec","max":21.6},{"text":"wt","max":4.884},{"text":"drat","max":3.684}]},{"center":["80%","50%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":20.76},{"text":"disp","max":330.96},{"text":"hp","max":216},{"text":"qsec","max":21.6},{"text":"wt","max":4.884},{"text":"drat","max":3.684}]}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
<div id="with-timeline" class="section level2">
<h2><span class="header-section-number">3.4</span> With Timeline</h2>
<p>You can set <code>t</code> to yield a radar chart with timeline.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(cars, indicator, Parameter, <span class="dt">t=</span>model, <span class="dt">type=</span><span class="st">&#39;radar&#39;</span>) %&gt;%
<span class="st">        </span><span class="kw">setTitle</span>(<span class="st">&#39;Merc 450SE  vs  450SL  vs  450SLC&#39;</span>)</code></pre></div>
<div id="htmlwidget-9604c7ed2581a0227039" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-9604c7ed2581a0227039">{"x":{"timeline":{"type":"number","data":["Merc 450SE","Merc 450SL","Merc 450SLC"],"x":80,"x2":80,"y2":50},"options":[{"series":[{"type":"radar","symbol":"none","name":0,"data":[{"name":"Parameter","value":[16.4,275.8,180,17.4,4.07,3.07]}]}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["mpg","disp","hp","qsec","wt","drat"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["Parameter"],"x":"left","y":"top","orient":"horizontal"},"polar":[{"center":["50%","50%"],"radius":"80%","indicator":[{"text":"mpg","max":20.76},{"text":"disp","max":330.96},{"text":"hp","max":216},{"text":"qsec","max":21.6},{"text":"wt","max":4.884},{"text":"drat","max":3.684}]}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC (model: Merc 450SE)","x":"center","y":"bottom","orient":"horizontal"}},{"series":[{"type":"radar","symbol":"none","name":0,"data":[{"name":"Parameter","value":[17.3,275.8,180,17.6,3.73,3.07]}]}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC (model: Merc 450SL)","x":"center","y":"bottom","orient":"horizontal"}},{"series":[{"type":"radar","symbol":"none","name":0,"data":[{"name":"Parameter","value":[15.2,275.8,180,18,3.78,3.07]}]}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC (model: Merc 450SLC)","x":"center","y":"bottom","orient":"horizontal"}}]},"evals":[],"jsHooks":[]}</script>
<p>When it comes to timeline, you should pay special attention. In order to make timeline work properly, you need an expand.grid dataset to cover all the combinations of x, series and <code>t</code> levels.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">carstat =<span class="st"> </span>data.table::<span class="kw">dcast</span>(data.table::<span class="kw">data.table</span>(mtcars),
              am +<span class="st"> </span>carb +<span class="st"> </span>gear ~., mean,
              <span class="dt">value.var=</span><span class="kw">c</span>(<span class="st">&#39;mpg&#39;</span>,<span class="st">&#39;disp&#39;</span>,<span class="st">&#39;hp&#39;</span>,<span class="st">&#39;qsec&#39;</span>,<span class="st">&#39;wt&#39;</span>,<span class="st">&#39;drat&#39;</span>))
carstat =<span class="st"> </span>data.table::<span class="kw">melt</span>(carstat, <span class="dt">id=</span><span class="kw">c</span>(<span class="st">&#39;am&#39;</span>, <span class="st">&#39;carb&#39;</span>, <span class="st">&#39;gear&#39;</span>))
<span class="kw">names</span>(carstat) &lt;-<span class="st"> </span><span class="kw">c</span>(<span class="st">&#39;am&#39;</span>, <span class="st">&#39;carb&#39;</span>, <span class="st">&#39;gear&#39;</span>, <span class="st">&#39;indicator&#39;</span>, <span class="st">&#39;Parameter&#39;</span>)
<span class="kw">levels</span>(carstat$indicator) &lt;-<span class="st"> </span><span class="kw">gsub</span>(<span class="st">&quot;_mean_</span><span class="ch">\\</span><span class="st">.&quot;</span>, <span class="st">&quot;&quot;</span>,
                                  <span class="kw">levels</span>(carstat$indicator))
carstat$am &lt;-<span class="st"> </span><span class="kw">factor</span>(carstat$am, <span class="dt">labels=</span><span class="kw">c</span>(<span class="st">&#39;A&#39;</span>, <span class="st">&#39;M&#39;</span>))
fullData &lt;-<span class="st"> </span><span class="kw">data.frame</span>(<span class="kw">expand.grid</span>(<span class="kw">levels</span>(carstat$indicator),
            <span class="kw">levels</span>(carstat$am), <span class="kw">unique</span>(carstat$carb)))
carstat &lt;-<span class="st"> </span><span class="kw">merge</span>(fullData, carstat, <span class="dt">all.x=</span><span class="ot">TRUE</span>)
carstat$carb &lt;-<span class="st"> </span><span class="kw">as.factor</span>(carstat$carb)
carstat$gear &lt;-<span class="st"> </span><span class="kw">as.factor</span>(carstat$gear)
<span class="kw">str</span>(carstat)</code></pre></div>
<pre><code>## &#39;data.frame&#39;:    5616 obs. of  8 variables:
##  $ Var1     : Factor w/ 6 levels &quot;mpg&quot;,&quot;disp&quot;,&quot;hp&quot;,..: 1 2 3 4 5 6 1 2 3 4 ...
##  $ Var2     : Factor w/ 2 levels &quot;A&quot;,&quot;M&quot;: 1 1 1 1 1 1 2 2 2 2 ...
##  $ Var3     : num  1 1 1 1 1 1 1 1 1 1 ...
##  $ am       : Factor w/ 2 levels &quot;A&quot;,&quot;M&quot;: 1 1 1 1 1 1 1 1 1 1 ...
##  $ carb     : Factor w/ 6 levels &quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,..: 1 1 1 1 1 1 1 1 1 1 ...
##  $ gear     : Factor w/ 3 levels &quot;3&quot;,&quot;4&quot;,&quot;5&quot;: 1 1 1 1 1 1 1 1 1 1 ...
##  $ indicator: Factor w/ 6 levels &quot;mpg&quot;,&quot;disp&quot;,&quot;hp&quot;,..: 1 1 1 1 1 1 1 1 1 1 ...
##  $ Parameter: num  20.3 20.3 20.3 20.3 20.3 ...</code></pre>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(carstat, indicator, Parameter, am, <span class="dt">facet=</span>carb, <span class="dt">t=</span>gear, <span class="dt">type=</span><span class="st">&#39;radar&#39;</span>) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;Merc 450SE  vs  450SL  vs  450SLC&#39;</span>)</code></pre></div>
<div id="htmlwidget-2a43caa3c77e0b8abeb7" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-2a43caa3c77e0b8abeb7">{"x":{"timeline":{"type":"number","data":["3","4","5"],"x":80,"x2":80,"y2":50},"options":[{"series":[{"type":"radar","symbol":"none","name":"1","data":[{"name":"A","value":[1464,14474.4,7488,1432.08,219.36,228.96]},{"name":"M","value":["-","-","-","-","-","-"]}]},{"type":"radar","symbol":"none","name":"2","data":[{"name":"A","value":[1234.8,24876,11700,1228.32,256.32,218.52]},{"name":"M","value":["-","-","-","-","-","-"]}],"polarIndex":1},{"type":"radar","symbol":"none","name":"3","data":[{"name":"A","value":[1173.6,19857.6,12960,1272,277.92,221.04]},{"name":"M","value":["-","-","-","-","-","-"]}],"polarIndex":2},{"type":"radar","symbol":"none","name":"4","data":[{"name":"A","value":[908.64,29980.8,16416,1216.368,337.3776,231.84]},{"name":"M","value":["-","-","-","-","-","-"]}],"polarIndex":3},{"type":"radar","symbol":"none","name":"6","data":[{"name":"M","value":["-","-","-","-","-","-"]},{"name":"A","value":["-","-","-","-","-","-"]}],"polarIndex":4},{"type":"radar","symbol":"none","name":"8","data":[{"name":"A","value":["-","-","-","-","-","-"]},{"name":"M","value":["-","-","-","-","-","-"]}],"polarIndex":5}],"legend":{"show":true,"data":["A","M"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["mpg","disp","hp","qsec","wt","drat"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"polar":[{"center":["20%","30%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":2514.24},{"text":"disp","max":35976.96},{"text":"hp","max":28944},{"text":"qsec","max":1853.28},{"text":"wt","max":404.85312},{"text":"drat","max":390.528}]},{"center":["50%","30%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":2514.24},{"text":"disp","max":35976.96},{"text":"hp","max":28944},{"text":"qsec","max":1853.28},{"text":"wt","max":404.85312},{"text":"drat","max":390.528}]},{"center":["80%","30%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":2514.24},{"text":"disp","max":35976.96},{"text":"hp","max":28944},{"text":"qsec","max":1853.28},{"text":"wt","max":404.85312},{"text":"drat","max":390.528}]},{"center":["20%","70%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":2514.24},{"text":"disp","max":35976.96},{"text":"hp","max":28944},{"text":"qsec","max":1853.28},{"text":"wt","max":404.85312},{"text":"drat","max":390.528}]},{"center":["50%","70%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":2514.24},{"text":"disp","max":35976.96},{"text":"hp","max":28944},{"text":"qsec","max":1853.28},{"text":"wt","max":404.85312},{"text":"drat","max":390.528}]},{"center":["80%","70%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":2514.24},{"text":"disp","max":35976.96},{"text":"hp","max":28944},{"text":"qsec","max":1853.28},{"text":"wt","max":404.85312},{"text":"drat","max":390.528}]}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC (gear: 3)","x":"center","y":"bottom","orient":"horizontal"}},{"series":[{"type":"radar","symbol":"none","name":"1","data":[{"name":"M","value":[2095.2,6062.4,5220,1383.84,149.22,292.14]},{"name":"A","value":["-","-","-","-","-","-"]}]},{"type":"radar","symbol":"none","name":"2","data":[{"name":"A","value":[1699.2,10350,5652,1544.4,228.24,273.96]},{"name":"M","value":[1864.8,7081.2,5796,1336.32,158.22,325.44]}],"polarIndex":1},{"type":"radar","symbol":"none","name":"3","data":[{"name":"A","value":["-","-","-","-","-","-"]},{"name":"M","value":["-","-","-","-","-","-"]}],"polarIndex":2},{"type":"radar","symbol":"none","name":"4","data":[{"name":"A","value":[1332,12067.2,8856,1339.2,247.68,282.24]},{"name":"M","value":[1512,11520,7920,1205.28,197.82,280.8]}],"polarIndex":3},{"type":"radar","symbol":"none","name":"6","data":[{"name":"A","value":["-","-","-","-","-","-"]},{"name":"M","value":["-","-","-","-","-","-"]}],"polarIndex":4},{"type":"radar","symbol":"none","name":"8","data":[{"name":"A","value":["-","-","-","-","-","-"]},{"name":"M","value":["-","-","-","-","-","-"]}],"polarIndex":5}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC (gear: 4)","x":"center","y":"bottom","orient":"horizontal"}},{"series":[{"type":"radar","symbol":"none","name":"1","data":[{"name":"A","value":["-","-","-","-","-","-"]},{"name":"M","value":["-","-","-","-","-","-"]}]},{"type":"radar","symbol":"none","name":"2","data":[{"name":"M","value":[2030.4,7754.4,7344,1209.6,131.508,295.2]},{"name":"A","value":["-","-","-","-","-","-"]}],"polarIndex":1},{"type":"radar","symbol":"none","name":"3","data":[{"name":"A","value":["-","-","-","-","-","-"]},{"name":"M","value":["-","-","-","-","-","-"]}],"polarIndex":2},{"type":"radar","symbol":"none","name":"4","data":[{"name":"M","value":[1137.6,25272,19008,1044,228.24,303.84]},{"name":"A","value":["-","-","-","-","-","-"]}],"polarIndex":3},{"type":"radar","symbol":"none","name":"6","data":[{"name":"M","value":[1418.4,10440,12600,1116,199.44,260.64]},{"name":"A","value":["-","-","-","-","-","-"]}],"polarIndex":4},{"type":"radar","symbol":"none","name":"8","data":[{"name":"M","value":[1080,21672,24120,1051.2,257.04,254.88]},{"name":"A","value":["-","-","-","-","-","-"]}],"polarIndex":5}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC (gear: 5)","x":"center","y":"bottom","orient":"horizontal"}}]},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="futher-setup" class="section level1">
<h1><span class="header-section-number">4</span> Futher Setup</h1>
<div id="setpolar" class="section level2">
<h2><span class="header-section-number">4.1</span> <code>setPolar</code></h2>
<p>The default radar chart is built on polygons. You can built it on circle using <code>setPolar</code>, which is only appliable for radar charts.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(cars, indicator, Parameter, <span class="dt">facet=</span>model, <span class="dt">type=</span><span class="st">&#39;radar&#39;</span>) %&gt;%
<span class="st">        </span><span class="kw">setTitle</span>(<span class="st">&#39;Merc 450SE  vs  450SL  vs  450SLC&#39;</span>) %&gt;%
<span class="st">    </span><span class="kw">setPolar</span>(<span class="dt">type=</span><span class="st">&#39;circle&#39;</span>)</code></pre></div>
<div id="htmlwidget-1127c7369344ca1ac941" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-1127c7369344ca1ac941">{"x":{"series":[{"type":"radar","symbol":"none","name":"Merc 450SE","data":[{"name":"Parameter","value":[16.4,275.8,180,17.4,4.07,3.07]}]},{"type":"radar","symbol":"none","name":"Merc 450SL","data":[{"name":"Parameter","value":[17.3,275.8,180,17.6,3.73,3.07]}],"polarIndex":1},{"type":"radar","symbol":"none","name":"Merc 450SLC","data":[{"name":"Parameter","value":[15.2,275.8,180,18,3.78,3.07]}],"polarIndex":2}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["mpg","disp","hp","qsec","wt","drat"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["Parameter"],"x":"left","y":"top","orient":"horizontal"},"polar":[{"center":["20%","50%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":20.76},{"text":"disp","max":330.96},{"text":"hp","max":216},{"text":"qsec","max":21.6},{"text":"wt","max":4.884},{"text":"drat","max":3.684}],"type":"circle"},{"center":["50%","50%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":20.76},{"text":"disp","max":330.96},{"text":"hp","max":216},{"text":"qsec","max":21.6},{"text":"wt","max":4.884},{"text":"drat","max":3.684}],"type":"circle"},{"center":["80%","50%"],"radius":"25.6666666666667%","indicator":[{"text":"mpg","max":20.76},{"text":"disp","max":330.96},{"text":"hp","max":216},{"text":"qsec","max":21.6},{"text":"wt","max":4.884},{"text":"drat","max":3.684}],"type":"circle"}],"title":{"text":"Merc 450SE  vs  450SL  vs  450SLC","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
<p>You can explore <code>setPolar</code> by typing <code>?setPolar</code> in R console.</p>
<p>Then you can configure the widgets, add markLines and/or markPoints, fortify the chart.</p>
<p>You can refer to related functions to play around on your own.</p>
</div>
</div>

<script type="text/javascript">
window.onload = function() {
  var i, fig = 1, caps = document.getElementsByClassName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.className !== 'figure' || cap.nodeName !== 'P')
      continue;
    cap.innerHTML = '<span>Figure ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
  fig = 1;
  caps = document.getElementsByTagName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.nodeName !== 'TABLE') continue;
    cap.innerHTML = '<span>Table ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
}
</script>



</div>

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>
